<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/js/vue.js"></script>
</head>
<style>
    .demo-alert-box {
        background-color: #ffaf99;
        padding: 10px;
    }
</style>
<body>
<h2>示例：组件slot</h2>
<div id="alert-box">
    <p>
        和 HTML 元素一样，我们经常需要向一个组件传递内容
    </p>

    <alert-box>
        Something bad happened.
    </alert-box>

    <h2>示例：具名插槽slot</h2>
    <base-layout>
        <template v-slot:header>
            <p>header</p>
        </template>

        <p>content.</p>
        <p>And another one.</p>

        <template v-slot:footer>
            <p>footer</p>
        </template>
    </base-layout>
</div>

<script>

    Vue.component('alert-box', {
        template: `<div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>`
    })

    Vue.component('base-layout', {
        template: `<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>`
    })

    new Vue({
        el: '#alert-box',
        data: {}
    })

</script>
</body>
</html>
